{% extends "base.html" %}
{% load staticfiles %}
{% load user_tags %}

{% block title %}
    推荐作者
{% endblock %}

{% block main_content %}
<div class="container recommend-box">
  <img class="img-responsive" src="{% static 'images/activeuser.png' %}" alt="Recommend author" />
  <div class="row">
  {% for recommend_author in recommend_authors %}
      {% check_is_following_user request recommend_author as is_following%}
    <div class="col-sm-6 col-lg-4">
      <div class="wrap">
        <a class="avatar" target="_blank" href="{{ recommend_author.get_absolute_url }}">
            <img src="{{ MEDIA_URL }}{{ recommend_author.avatar }}" alt="avatar">
        </a>
        <h4>
            <a target="_blank" href="{{ recommend_author.get_absolute_url }}">
               {{ recommend_author.get_username_or_nickname }}
            </a>
        </h4>
        <p class="description">{{ recommend_author.signature }}</p>
        <a class="btn {% if is_following %}btn-round btn-default{% else %}btn-teal btn-circular{% endif %}"
            id="attenttouser_{{ recommend_author.id }}"
            data-login="{% if not request.user.is_authenticated %}un{% endif %}login"
            data-action="{% if is_following %}un{% endif %}follow"
            onclick="attentto_user({{ recommend_author.id }})">
            {% if is_following %}
                <i class="fa fa-check"></i> 已关注
            {% else %}
                <i class="fa fa-plus"></i> 关注
            {% endif %}
        </a>
        <hr>
        <div class="meta">战绩</div>
        <div class="recent-update ">
          <div class="news"><span>粉丝  10个</span> · <span>文章  18篇</span> · 126.5K字</div>
        </div>
      </div>
    </div>
  {% endfor %}
  </div>
  <div class="text-center m-t-50">
    <ul class="pagination">
      <li>
        <a href="#" class="previous">
          <i class="fa fa-angle-left"></i>
        </a>
      </li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li class="active"><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li>
        <a href="#" class="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </li>
    </ul>
  </div>
</div>
{% endblock %}

